<template>
  <!-- 养殖作业新增
      props: tableAdd_visible：显示隐藏  farmingIdList：养殖档案信息 farmingOperateList：养殖操作名称 supplySkuList：投入品信息
      emit: finish：关闭刷新 closeAddDialog：关闭弹窗 -->
  <div>
    <el-dialog :title="dialogtitle" :visible.sync="tableAdd_visible" width="740px" :before-close="tableClose">
      <el-form ref="addFormRef" :model="addForm" label-width="130px" :rules="addFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="养殖档案编号" prop="farmingId">
              <el-select v-model="addForm.farmingId" placeholder="请选择养殖档案" clearable @change="selectGetFarmingId">
                <el-option v-for="item in farmingIdList" :key="item.farmingId" :label="item.farmingId"
                  :value="item.farmingId">
                  <div style="display: flex; flex-direction: row;">
                    <span style="">{{ item.farmingId }}</span>
                    <span style="color: #8492a6; font-size: 13px; padding-left:5px;">{{ item.baseName }}</span>
                    <span style="color: #8492a6; font-size: 13px; padding-left:5px;">{{ item.farmingTime }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业时间" prop="operateTime">
              <el-date-picker :picker-options="pickerOptions" v-model="addForm.operateTime" type="datetime"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作名称" prop="operateName">
              <el-select v-model="addForm.operateName" placeholder="请选择操作名称" clearable
                @change="selectGetFarmingOperate">
                <el-option v-for="(item,index) in farmingOperateList" :key="index" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投入品数量" prop="supplyAmount">
              <el-input v-model.number="addForm.supplyAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投入品编号" prop="supplySkuNumber">
              <el-select v-model="addForm.supplySkuNumber" placeholder="请选择投入品SKU编号" @change="selectSupplySKU">
                <el-option v-for="item in supplySkuList" :key="item.skuNumber" :label="item.skuNumber"
                  :value="item.skuNumber">
                  <div style="display: flex; flex-direction: row;">
                    <span style="">{{ item.supplyName }}</span>
                    <span style="color: #8492a6; font-size: 13px; padding-left:7px;">{{ "供应商:"+item.supplier }}</span>
                    <span
                      style="color: #8492a6; font-size: 13px; padding-left:7px;">{{ "规格:" +item.specification }}</span>
                    <span
                      style="color: #8492a6; font-size: 13px; padding-left:7px;">{{ "剩余数量:" + item.surplusAmount }}</span>
                    <span
                      style="color: #8492a6; font-size: 13px; padding-left:7px;">{{ "所属仓库:" + item.warehouseName }}</span>
                    <span
                      style="color: #8492a6; font-size: 13px; padding-left:7px;">{{ "SKU编号:"+item.skuNumber }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="24" label="投入品信息">
            <el-input v-model="supplyMsg" :disabled="true" type="textarea" autosize>
            </el-input>
          </el-col>
        </el-row>
        <!-- <el-form-item label="上传图片" prop="picture">
          <el-upload action="http://120.77.156.205:9610/file/upload" :on-exceed="handleExceed"
            :on-success="handleSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
            :file-list="fileList" list-type="picture-card" :limit="1">
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件，且不超过500kb，点击放大图片</div>
          </el-upload>
        </el-form-item> -->
        <el-row>
          <el-col :span="24">
            <el-form-item>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- 占位 -->
          <el-col :span="6">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item>
              <el-button type="primary" @click="addformOnSubmit">立即创建</el-button>
              <el-button @click="closeform">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>
    <!-- <el-dialog :visible.sync="picDialogVisible" title="放大图片">
      <img width="100%" :src="addForm.picture" alt="">
    </el-dialog> -->
  </div>
</template>
<script>
  // 接口数据
  import {
    newOperation,
  } from "@/Api/productionmanage/Operations"
  export default {
    name: 'OperationTableAddForm',
    props: {
      tableAdd_visible: {
        type: Boolean,
        default: false
      },
      farmingIdList: {
        type: Array,
        default: () => []
      },
      farmingOperateList: {
        type: Array,
        default: () => []
      },
      supplySkuList: {
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        supplyMsg: "",
        // 表单内容
        addForm: {
          farmingId: "",
          operateName: "",
          operateTime: "",
          picture: "",
          supplyAmount: 0,
          supplySkuNumber: "",
          userSupplyId: "",
        },
        // 表单规则
        addFormRules: {
          farmingId: [{
            required: true,
            message: '请输入'
          }],
          operateTime: [{
            required: true,
            message: '请输入'
          }],
          operateName: [{
            required: true,
            message: '请输入'
          }],
          supplySkuNumber: [{
            required: true,
            message: '请输入'
          }],
          supplyAmount: [{
            required: true,
            message: '请输入'
          }],
        },
        // 表单标题
        dialogtitle: "新建养殖作业",
        // 日期时间选择器快捷按钮
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        // 上传图片
        // fileList: [],
        // picDialogVisible: false
      }
    },
    created() {},
    methods: {
      // 关闭编辑弹窗
      tableClose() {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.closeform();
          })
          .catch(_ => {});
      },
      // 编辑弹窗确定
      addformOnSubmit() {
        this.$refs["addFormRef"].validate(async (valid) => {
          if (valid) {
            console.log("addForm:" ,this.addForm);
            const {
              data: res
            } = await newOperation(this.addForm)
            if (res.statusCode === 20000) {
              this.$emit("finish")
              this.closeform();
              return this.$message.success("新增养殖作业成功");
            } else {
              console.log("新增养殖作业失败" + res.message);
              return this.$message.error("新增养殖作业失败");
            }
          } else {
            return this.$message.error("请输入完整信息");
          }
        });
      },
      // 
      // 养殖档案选择器
      selectGetFarmingId(vId) {
        this.addForm.farmingId = vId;
      },
      // 养殖操作选择器
      selectGetFarmingOperate(vId) {
        this.addForm.operateName = vId;
      },
      // 投入品SKU选择器
      selectSupplySKU(vId) {
        let arr = this.supplySkuList;
        for (let i in this.supplySkuList) {
          if (arr[i].skuNumber == vId) {
            this.addForm.userSupplyId = arr[i].id;
            this.supplyMsg = "投入品名称:" + arr[i].supplyName + " 供应商:" + arr[i].supplier + " 规格:" + arr[i].specification +
              " 剩余数量:" + arr[i].surplusAmount + " 所属仓库:" + arr[i].warehouseName + " 编号:" + arr[i].id;
          }
        }
      },
      // 上传图片
      // getfileList() {
      // if (this.addForm.picture != "") {
      //   this.fileList.push({
      //     name: this.editform.picture,
      //     url: this.editform.picture
      //   });
      // } else {
      //   this.fileList = [];
      // }
      // },
      // 上传前对图片格式及大小验证
      // onBeforeUpload(file) {
      //   const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png';
      //   const isLt1M = file.size / 1024 / 1024 < 0.5;

      //   if (!isIMAGE) {
      //     this.$message.error('上传文件只能是图片格式!');
      //   }
      //   if (!isLt1M) {
      //     this.$message.error('上传文件大小不能超过 500KB!');
      //   }
      //   return isIMAGE && isLt1M;
      // },

      // 上传图片
      // handleSuccess(file) {
      //   console.log(file)
      //   if (file.statusCode === 20000) {
      //     let obj = JSON.parse(file.data).url;
      //     console.log(obj);
      //     if(obj !=="" && obj !=="string"){
      //       this.addForm.picture = obj;
      //     }else{
      //       this.addForm.picture="";
      //       this.fileList=[];
      //       return this.$message.error('图片上传失败');
      //     }
      //   } else return this.$message.error('图片上传失败');

      // },
      // handleExceed() {
      //   return this.$message.error('只能上传一张图片哦');
      // },
      // handleRemove(file, fileList) {
      //   this.addForm.picture = "";
      //   this.fileList=[];
      //   // console.log(file, fileList);
      // },
      // handlePictureCardPreview(file) {
      //   // console.log(file);
      //   this.picDialogVisible = true;
      // },

      // 关闭编辑表单弹窗
      closeform() {
        var a = false;
        this.fileList = [];
        this.$emit("closeAddDialog", a);
        // 清空表单
        this.resetform();
        // }
      },
      resetform() {
        this.$nextTick(() => {
          this.$refs.addFormRef.resetFields();
        })
      },

    },
    watch: {}
  }

</script>
<style>
</style>
